<template>
  <el-menu
    :default-active="currentRouteName"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="height: 100%"
    :collapse="!isShrink"
    :collapse-transition="false"
    :router="true"
  >
    <div class="logo">
      <img
        src="../../../assets/image/logo.png"
        :class="{ 'img-shrink': !isShrink }"
        alt=""
      />
      <span v-show="isShrink">宠物管理系统</span>
    </div>
    <el-menu-item index="itemManage">
      <i class="el-icon-shopping-bag-1"></i>
      <span slot="title">商品管理</span>
    </el-menu-item>
    <el-menu-item index="userManage">
      <i class="el-icon-s-custom"></i>
      <span slot="title">用户管理</span>
    </el-menu-item>
    <el-menu-item index="petManage">
      <i
        style="font-size: 20px; margin: 0 8px 0px 2px"
        class="iconfont icon-chongwu"
      ></i>
      <span slot="title">宠物管理</span>
    </el-menu-item>
    <el-menu-item index="roomManage">
      <i class="el-icon-s-home"></i>
      <span slot="title">房间管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
export default {
  mounted() {
    this.currentRouteName = this.$route.name
   },
  data() {
    return {
      currentRouteName:''
    }
   },
  computed: {
    ...mapState("home", ["isShrink"]),
  }
};
</script>

<style lang="less" scoped>
.logo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  // align-items: center;
  color: rgba(255, 255, 255, 0.6);
  img {
    height: 50px;
    width: 50px;
    transform: translateX(20px);
  }
  span {
    min-width: 100px;
  }
  .img-shrink {
    width: 30px;
    height: 30px;
    transform: none;
  }
}
.logo-in-middle {
  align-items: center;
}
</style>
